<template>
  <el-dialog title="修改地址" :visible.sync="addressDialogVisible" width="50%" @close="addressDialogClosed">
    <el-form :model="addressForm" :rules="addressFormRules" ref="addressFormRef" label-width="100px">
      <el-form-item label="省市区/县" prop="address1">
        <el-cascader :options="cityData" v-model="addressForm.address1" :props="cityProps"></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address2">
        <el-input v-model="addressForm.address2"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addressDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm">
        确 定
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import cityData from './citydata'
export default {
  data() {
    return {
      addressDialogVisible: false,
      // 级联菜单的数据
      cityData,
      // 级联菜单的配置项
      cityProps: {
        expandTrigger: 'hover'
      },
      // 表单数据
      addressForm: {
        order_id: '',
        // 省市区
        address1: [],
        // 详细地址
        address2: ''
      },
      // 表单校验规则
      addressFormRules: {
        address1: [{ required: true, message: '省市区必填', trigger: 'blur' }],
        address2: [
          { required: true, message: '请填写详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开对话框供父级使用
    openDialog(order) {
      // 可以使用$parent来获取父组件对象，从而可以实现在子组件中使用父组件的东西
      // this.$parent.test()
      this.addressDialogVisible = true
      this.addressForm.order_id = order.order_id
    },
    // 关闭对话框的事件
    addressDialogClosed() {
      this.addressForm.address1 = []
      this.addressForm.address2 = ''
    },
    // 提交
    submitForm() {
      this.$refs.addressFormRef.validate(valid => {
        if (!valid) return this.$message.error('表单验证不通过')
        console.log('ok')
      })
    }

  }
}
</script>

<style lang="scss" scoped></style>